<template>
	<view class="">
		<view class="cu-item self" v-if="message.from.id==user.id">
			<view class="main">
				<chat-deanpopover  :message="message" :direction="'right'" :btnList="app_btn_list" :modalTopPos="'calc(100% + 30rpx)'" :modalLeftPos="'calc(50% - 7.5vw)'">
						<image v-if="message.data.content"  mode="aspectFit" :src="$tool.chat_img_url(message.data.content)" :data-url="$tool.chat_img_url(message.data.content)" @tap="imViewImage"></image>
						<view  v-else class="grid flex-sub padding-lr" :class="col_class" style="width: calc(100vw - 260rpx);">
							<view v-if="message.data.extra&&message.data.extra.images" @tap="imViewImage" class="bg-img" :class="!isCard?'':'only-img'" 
							 v-for="(item,index) in message.data.extra.images" :key="index" :src="$tool.chat_img_url(item)" :data-url="$tool.chat_img_url(item)" :style="{'background-image':('url('+item+')')}">
							</view>
						</view>
				</chat-deanpopover>
				<!-- <image mode="aspectFit" :src="$tool.chat_img_url(message.data.content)" :data-url="$tool.chat_img_url(message.data.content)" @tap="imViewImage"></image> -->
			</view>
			<chat-avatar :message="message"></chat-avatar>
			<view class="date">{{message.sended_at}}
			<chat-vote :message="message"></chat-vote>
			</view>
		</view>
		<view class="cu-item" v-else>
			<chat-avatar :message="message"></chat-avatar>
			<view class="date">{{message.sended_at}}
			<chat-vote :message="message"></chat-vote>
			</view>
			<view class="main">
				<chat-deanpopover  :message="message" :direction="'right'" :btnList="app_btn_list" :modalTopPos="'calc(100% + 30rpx)'" :modalLeftPos="'calc(50% - 7.5vw)'">
					
					<image v-if="message.data.content"  mode="aspectFit" :src="$tool.chat_img_url(message.data.content)" :data-url="$tool.chat_img_url(message.data.content)" @tap="imViewImage"></image>
					<view  v-else class="grid flex-sub padding-lr" :class="col_class" style="width: calc(100vw - 260rpx);">
						<view v-if="message.data.extra&&message.data.extra.images" @tap="imViewImage" class="bg-img" :class="!isCard?'':'only-img'" 
						 v-for="(item,index) in message.data.extra.images" :key="index" :src="$tool.chat_img_url(item)" :data-url="$tool.chat_img_url(item)" :style="{'background-image':('url('+item+')')}">
						</view>
					</view>
				</chat-deanpopover>
				<!-- <image mode="aspectFit" :src="$tool.chat_img_url(message.data.content)" :data-url="$tool.chat_img_url(message.data.content)" @tap="imViewImage"></image> -->
			</view>
		</view>
	</view>
</template>

<script>
	import app from '@/mixins/app.js'
	export default {
		name:'chatimage',
		data(){
			return {
				isCard:false
			}
		},
		mixins:[app],
		methods:{
			imViewImage(e) {
				uni.previewImage({
					urls: this.current_images,
					current: e.currentTarget.dataset.url
				});
			},
		},
		computed:{
			col_length(){
				if(this.message.data.extra.images&&this.message.data.extra.images.length){
					return this.message.data.extra.images.length
				}
				return 0
			},
			col_class(){
				
				var col = ''
				if(this.col_length>=3){
					col =  'col-3 grid-square'
				} else{
					col =  'col-'+this.col_length+' grid-square'
				} 
				
				console.log(this.message.data.extra,this.col_length,col,'213213123213213223')
				return col
			}
		},
		props: {
			message: {
				type: [Object],
				default:()=>{
					return {}
				}
			},
			current_images:{
				type:[Array],
				default:()=>{
					return []
				}
			}
			
			
		}
	}
</script>
	
<style>
</style>
